{% extends "base.html" %}

{% block content %}
<div class="container">
    <h4>用户搜索</h4>
    <form method="post" class="mb-4">
        <div class="row">
            <div class="col-md-2 mb-3">
                <label for="username" class="form-label">用户名:</label>
                <input type="text" id="username" name="username" class="form-control" value="{{ username }}" placeholder="可选">
            </div>
            <div class="col-md-2 mb-3">
                <label for="email" class="form-label">邮箱:</label>
                <input type="text" id="email" name="email" class="form-control" value="{{ email }}" placeholder="可选">
            </div>
            <div class="col-md-2 mb-3">
                <label for="phone" class="form-label">电话:</label>
                <input type="text" id="phone" name="phone" class="form-control" value="{{ phone }}" placeholder="可选">
            </div>
            <div class="col-md-2 mb-3">
                <label for="tags" class="form-label">标签:</label>
                <select id="tags" name="tags" class="form-select">
                    <option value="">选择标签</option>
                    {% for tag in tags %}
                        <option value="{{ tag.name }}" {% if tag.name == selected_tag %}selected{% endif %}>{{ tag.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2 mb-3 d-flex align-items-end">
                <button type="submit" class="btn btn-primary w-80">搜索</button>
            </div>
        </div>
    </form>
    
    {% if users %}
        <div class="row mb-4">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">用户总数</h5>
                        <p class="card-text">{{ total_users }}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">活跃人数</h5>
                        <p class="card-text">{{ active_users }}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">平均消费金额</h5>
                        <p class="card-text">{{ average_spending_score }}</p>
                    </div>
                </div>
            </div>
        </div>
        <h4>搜索结果</h4>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>用户名</th>
                    <th>邮箱</th>
                    <th>电话号码</th>
                    <th>会员等级</th>
                    <th>注册时间</th>
                    <th>标签</th>
                </tr>
            </thead>
            <tbody>
                {% for user in users.items %}
                    <tr class="user-row">
                        <td>{{ user.username }}</td>
                        <td>{{ user.email }}</td>
                        <td>{{ user.phone }}</td>
                        <td>{{ user.membership_level }}</td>
                        <td>{{ user.registration_date.strftime('%Y-%m-%d') }}</td>
                        <td>
                            {% if selected_tag %}
                                <span class="badge bg-secondary">{{ selected_tag }}</span>
                            {% else %}
                                -
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
        <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center">
                {% if users.has_prev %}
                    <li class="page-item">
                        <a class="page-link" href="{{ url_for('user_search', page=users.prev_num) }}">上一页</a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <a class="page-link" href="#">上一页</a>
                    </li>
                {% endif %}
                {% for page_num in users.iter_pages() %}
                    {% if page_num %}
                        {% if page_num == users.page %}
                            <li class="page-item active">
                                <a class="page-link" href="#">{{ page_num }}</a>
                            </li>
                        {% else %}
                            <li class="page-item">
                                <a class="page-link" href="{{ url_for('user_search', page=page_num) }}">{{ page_num }}</a>
                            </li>
                        {% endif %}
                    {% else %}
                        <li class="page-item disabled">
                            <a class="page-link" href="#">...</a>
                        </li>
                    {% endif %}
                {% endfor %}
                {% if users.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="{{ url_for('user_search', page=users.next_num) }}">下一页</a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <a class="page-link" href="#">下一页</a>
                    </li>
                {% endif %}
            </ul>
        </nav>
    {% endif %}
</div>

<!-- 可视化内容 -->
<div class="container mt-5">
    <div class="row">
        <div class="col-md-6">
            <h4>用户标签分布（柱状图）</h4>
            <canvas id="tagBarChart" width="400" height="400"></canvas>
        </div>
        <div class="col-md-6">
            <h4>用户标签分布（饼图）</h4>
            <canvas id="tagPieChart" width="400" height="400"></canvas>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
    var barCtx = document.getElementById('tagBarChart').getContext('2d');
    var pieCtx = document.getElementById('tagPieChart').getContext('2d');
    var labels = [{% for tag, count in tag_data %}'{{ tag }}'{% if not loop.last %}, {% endif %}{% endfor %}];
    var data = [{% for tag, count in tag_data %}{{ count }}{% if not loop.last %}, {% endif %}{% endfor %}];

    var tagBarChart = new Chart(barCtx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: '用户数量',
                data: data,
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    var tagPieChart = new Chart(pieCtx, {
        type: 'pie',
        data: {
            labels: labels,
            datasets: [{
                label: '用户数量',
                data: data,
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top',
                },
                tooltip: {
                    callbacks: {
                        label: function(tooltipItem) {
                            return tooltipItem.label + ': ' + tooltipItem.raw;
                        }
                    }
                }
            }
        }
    });
</script>
{% endblock %}